$color:#2fa43c;
$blackColor:#323232;
$grayColor:#9b9b9b;
$yellowColor:#ffc21f;
$redColor: #F04844;
@mixin prefixKey($key, $value) {
    #{$key}: $value;
    -o-#{$key}: $value;
    -ms-#{$key}: $value;
    -moz-#{$key}: $value;
    -webkit-#{$key}: $value;
}

@mixin prefixValue($key, $value) {
    #{$key}: #{$value};
    #{$key}: -moz-#{$value};
    #{$key}: -webkit-#{$value};
}

@mixin prefixKeyValue($key, $value) {
    #{$key}: $value;
    -o-#{$key}: -o-#{$value};
    -ms-#{$key}: -ms-#{$value};
    -moz-#{$key}: -moz-#{$value};
    -webkit-#{$key}: -webkit-#{$value};
}

//flex
@mixin flex {
    @include prefixValue(display, flex);
}

@mixin flex-1 {
    @include prefixKey(flex, 1);
}

@mixin flexVertical {
    @include prefixKey(flex-direction, column);
}

@mixin flexMult {
    @include prefixKey(flex-wrap, wrap);
}

@mixin flexLeft {
    @include prefixKey(justify-content, flex-start);
}

@mixin flexCenter {
    @include prefixKey(justify-content, center);
}

@mixin flexRight {
    @include prefixKey(justify-content, flex-end);
}

@mixin flexLeftRight {
    @include prefixKey(justify-content, space-between);
}

@mixin flexAround {
    @include prefixKey(justify-content, space-around);
}

@mixin flexTop {
    @include prefixKey(align-items, flex-start);
}

@mixin flexMiddle {
    @include prefixKey(align-items, center);
}

@mixin flexBottom {
    @include prefixKey(align-items, flex-end);
}

@mixin flexTopBottom {
    @include prefixKey(align-items, stretch);
}

@mixin ellipsis($line) {
    @include prefixValue(display, box);
    overflow: hidden;
    text-overflow: ellipsis;
    @include prefixKey(line-clamp, $line);
    @include prefixKey(box-orient, block-axis);
    word-break: break-all;
}

.red {
    color: red;
}

.green {
    color: #009688;
}

.blue {
    color: blue;
}

.bluelight {
    color: #2D8CF0;
}

// 页面底部技术支持
.cominfo {
    color: gray;
    text-align: center;
    padding: 30px 0;
    font: 100 16px/36px "";
}

//页面顶部标题
.h-container {
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    font-style: normal;
    color: #999999;
    background-color: rgba(243, 243, 243, 1);
    >.w {
        @include flex;
        @include flexLeftRight;
        @include flexMiddle;
        width: 1550px;
        font-size: 16px;
        margin: 0 auto;
        z-index: 999;
        >.left {
            height: 50px;
            @include flex;
            @include flexMiddle;
            .nameList {
                height: 20px;
                font-size: 18px;
                line-height: 20px;
                padding-left: 5px;
                border-left: 5px solid #19BE6B;
            }
        }
        .refresh {
            width: 120px;
            height: 36px;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            border-radius: 3px;
            background: #1abc9c;
            color: #fff;
            border: 1px solid rgba(204, 204, 204, 1);
            line-height: 36px;
            text-align: center;
            cursor: pointer;
        }
    }
}

.addBtn {
    width: 150px;
    height: 36px;
    background: #19BE6B;
    color: #fff;
    font-size: 14px;
    margin: 8px 10px;
}

//表格
.table {
    padding: 8px 15px 0;
}

.bluelight1 {
    color: #fff;
    background: rgb(47, 173, 133);
    border: 1px solid rgb(47, 173, 133);
}

// 表格变表单
.content {
    width: 100%;
    margin: 20px auto;
    >.meljTitle {
        overflow: hidden;
        margin-bottom: 20px;
    }
}